{% extends 'layout/manage.html' %}
{% load static %}
{% load dashboard %}
{% load issues %}

{% block css %}
    <style>
        .table-right tbody tr td.label-left {
            width: 90px;
        }

        .table-right tbody tr td {
            border: 0;
        }

        .status-count {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .status-count .count {
            font-size: 25px;
        }

        .status-count a {
            text-decoration: none;
        }

        .user-item .title {
            margin: 10px 0;
        }

        .user-item .avatar, .top-10 .avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .user-item .text {
            line-height: 30px;
        }

        .top-10 .avatar {
            margin-right: 0;
        }

        .top-10 td {
            padding: 5px 10px;
        }

        .top-10 .table > tbody > tr > td {
            border-top: 0;
            border-bottom: 1px solid #dddddd;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid" style="">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart-o" aria-hidden="true"></i>
                        新增问题趋势
                    </div>
                    <div class="panel-body">
                        <div id="chart" style="width: 100%; min-height: 200px">

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-quora" aria-hidden="true"></i>
                                问题
                            </div>
                            <div class="panel-body">
                                {% for key, item in status_dict.items %}
                                    <div class="col-sm-4 status-count">
                                        <a href="{% url 'issues' project_id=request.bug_platform.project.id %}?status={{ key }}">
                                            <div class="count">{{ item.count }}</div>
                                            <div>{{ item.text }}</div>
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <i class="fa fa-user" aria-hidden="true"></i>
                                项目成员
                            </div>
                            <div class="panel-body user-item">
                                <div class="col-sm-12 title">创建者:</div>
                                <div class="clearfix">
                                    <div class="col-sm-6">
                                        <div class="avatar">{{ request.bug_platform.project.creator.username.0| upper }}</div>
                                        <div class="text">{{ request.bug_platform.project.creator.username }}</div>
                                    </div>
                                </div>
                                <div class="col-sm-12 title">参与者:</div>
                                <div>
                                    {% for user in user_list %}
                                        <div class="col-sm-4">
                                            <div class="avatar">{{ user.user__username.0| upper }}</div>
                                            <div class="text">{{ user.user__username }}</div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-cog" aria-hidden="true"></i>
                        详细
                    </div>
                    <div class="panel-body">
                        <table class="table table-right">
                            <tbody>
                            <tr>
                                <td class="label-left">项目名称：</td>
                                <td>{{ request.bug_platform.project.name }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目描述：</td>
                                <td>{{ request.bug_platform.project.desc }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">创建时间：</td>
                                <td>{{ request.bug_platform.project.create_datetime }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目空间：</td>
                                {# 已经使用的空间 / 总共空间#}
                                <td>
                                    {#                                    {{ request.bug_platform.project.use_space }} /#}
                                    {% user_space request.bug_platform.project.use_space %} /
                                    {{ request.bug_platform.price_policy.project_space }} GB
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-list-ul" aria-hidden="true"></i>
                        动态
                    </div>
                    <div class="panel-body top-10">
                        <table class="table">
                            <tbody>
                            {% for item in top_ten_object %}
                                <tr>
                                    <td>
                                        <div class="avatar">{{ item.creator.username.0| upper }}</div>
                                    </td>
                                    <td>
                                        <div>{{ item.creator.username }}</div>
                                        <div>
                                            指派<a
                                                href="{% url 'issues_detail' project_id=request.bug_platform.project.id issues_id=item.id %}">{% string_just item.id %}</a>
                                            给：{{ item.assign.username }}
                                        </div>
                                    </td>
                                    <td>
                                        {{ item.creator_datetime }}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
    // 导入中文包在线
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script>
        var ISSUES_CHART = "{% url 'issues_chart' project_id=request.bug_platform.project.id %}"
        Highcharts.setOptions({     // chart全局配置
            global: {
                {#Date:,#}
                useUTC: false       // 默认是utc时间 取消utc时间
            }
        })
        $(function () {
            initChart();
        });

        /*
        初始化Chart
         */
        function initChart() {
            // 参数【字典
            var config = {
                title: { // 标题
                    {#text: '2010 ~ 2016 年太阳能行业就业人员发展情况'#}
                    text: null
                },
                subtitle: { // 子标题
                    {#text: '数据来源：thesolarfoundation.com'#}
                    text: null
                },
                credits: {
                    enabled: false  // 关闭版权信息
                },
                yAxis: {    // y轴
                    title: {
                        text: '问题数量'
                    }
                },
                xAxis: {
                    type: 'datetime',      // x轴已时间格式显示
                    tickInterval: 60 * 60 * 24 * 1000,      // 每一个的间隔时间【 一天
                    label: {
                        formatter: function () {
                            return Highcharts.dateFormat('%s-%d', this.value);
                        },
                        rotation: -30   // 倾斜多少度
                    }
                },
                tooltip: {// 鼠标放上去显示内容
                    headerFormat: '<b>日期：{point.key}</b><br>',
                    pointFormat: '<span style="color: {series.color}">\u25CF</span>数量：{point.y}'
                },
                legend: {   // 折现名字参数
                    {#layout: 'vertical',#}
                    {#align: 'right',#}
                    {#verticalAlign: 'middle'#}
                    enable: false  // 关闭
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        linesWidth: 1,
                    },
                    marker: {
                        lineColor: '#666666',
                        linesWidth: 1,
                    },
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '最近30天',
                    // data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
                    data: [
                        // [时间戳，数据]
                    ]
                },],
            }

            //  var chart = Highcharts.chart('chart', config);   // 原始

            $.ajax({
                url: ISSUES_CHART,
                type: 'GET',
                dataType: 'JSON',
                success: function (res) {
                    config.series[0].data = res.data;
                    var chart = Highcharts.chart('chart', config);
                }
            })
        }
    </script>
{% endblock %}